<template>
    <div>

        <van-cell title="订单编号" :value="orders[orderIdex].ID"/>
        <van-cell title="创建日期" :value="orders[orderIdex].createTime"/>


        <van-cell-group>
            <van-field
                    :disabled="orders[orderIdex].payed===true"
                    :required="orders[orderIdex].payed!==true"
                    :value="orders[orderIdex].payed===true ? orders[orderIdex].consignee:consignee"
                    @input="fieldChange($event,'consignee')"
                    label="收件人"
                    placeholder="请输入姓名"
            />
            <van-field
                    type="digit"
                    :disabled="orders[orderIdex].payed===true"
                    :required="orders[orderIdex].payed!==true"
                    @input="fieldChange($event,'phone')"
                    :value="orders[orderIdex].payed===true ? orders[orderIdex].phone:phone"
                    label="手机号"
                    placeholder="请输入手机号"
            />


            <van-cell :required="orders[orderIdex].payed!==true"
                      :disabled="orders[orderIdex].payed===true"
                      :title="orders[orderIdex].payed===true ? '收货地址':'请选择收货地址'"
                      :value="orders[orderIdex].payed===true ? orders[orderIdex].city:city"
                      :is-link="orders[orderIdex].payed!==true"
                      @click="showPopup"/>
            <van-popup
                    v-model="show"
                    position="bottom"
                    custom-style="height: 40%"
                    @close="popupClose"
            >
                <van-area @confirm='areaConfirm($event)'
                          @cancel="popupClose" :area-list="areaList"/>
            </van-popup>


            <van-field
                    :disabled="orders[orderIdex].payed===true"
                    :required="orders[orderIdex].payed!==true"
                    :value="orders[orderIdex].payed===true?orders[orderIdex].address:address"
                    placeholder="请输入详细地址"
                    @input="fieldChange($event,'address')"
                    label="详细地址"
                    type="textarea"
                    autosize
            />
            <van-field
                    :disabled="orders[orderIdex].payed===true"
                    :value="orders[orderIdex].payed===true?orders[orderIdex].message:message"
                    :placeholder="orders[orderIdex].payed===true?'':'给店主留言'"
                    @input="fieldChange($event,'message')"
                    label="留言"
                    type="textarea"
                    autosize
            />

        </van-cell-group>


        <van-collapse :value="activeNames" @change="onChangeColl"
                      :clickable="true" :border="false">
            <van-collapse-item title="详情" name="cardList">

                <div class="card" v-for="(item,index) in orders[orderIdex].list"
                     :key="index">
                    <div class="product">
                        <van-card
                                @click-thumb="todetail(item.ID)"
                                :price="item.TPrice"
                                :origin-price="item.TOrPrice"
                                :title="item.Name"
                                :desc="item.TypeName"
                                :thumb="URL + '/products/' + item.ID +'/BI/' + item.Img"
                        >
                            <div slot="bottom">
                                <div class="number">
                                    x {{item.Mount}}
                                </div>
                            </div>
                        </van-card>
                    </div>
                </div>

            </van-collapse-item>
        </van-collapse>


        <div class="footSpace"></div>


        <div>
            <van-submit-bar
                    :disabled="orders[orderIdex].payed===true "
                    :price="orders[orderIdex].tPrice"
                    :button-text="orders[orderIdex].payed===true?'已经支付':'立即支付'"
                    @submit="pay"
            >

            </van-submit-bar>
        </div>

        <van-dialog id="van-dialog"/>


    </div>
</template>


<script>
    import Vue from 'vue';
    import { Cell, CellGroup } from 'vant';

    Vue.use(Cell);
    Vue.use(CellGroup);
    import { Field } from 'vant';

    Vue.use(Field);
    import { Area } from 'vant';

    Vue.use(Area);
    import { Collapse, CollapseItem } from 'vant';

    Vue.use(Collapse);
    Vue.use(CollapseItem);
    import {Dialog} from 'vant';
    import areaList from './area'

    export default {
        beforeMount: function () {
            this.ID = this.$route.query.ID;
            console.log('onshow执行了',this.ID,this.$route);
            this.orderIdex = -1;
            let allOrders = this.$store.state.orders;
            this.orders = allOrders;
            console.log('store中orders的数据为：', allOrders);

            for (let i = 0; i < allOrders.length; i++) {
                if (allOrders[i].ID == this.ID) {
                    this.orderIdex = i;
                }
            }
            console.log('检索到的orderIndex为：', this.orderIdex);

            let indexItem = allOrders[this.orderIdex];
            this.orders[this.orderIdex] = Object.assign({}, indexItem);
            console.log('当前orders:', this.orders);
        },

        data() {
            return {
                orders: [],
                orderIdex: 0,
                ID: -1,
                consignee: '',
                phone: '',
                city: '',
                address: '',
                message: '',
                payed: false,
                URL: 'http://43.226.148.67:5000/',
                activeNames: ['cardList'],
                areaList,
                show: false,
                allCheck: true,
                imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg',
            }
        },
        methods: {

            todetail: function(ID){
                console.log('在pay页面点击了跳转到详情');
                this.$router.push('/pages/details/main?ID=' + ID);
            },
            onChange: function () {
                console.log(this.allCheck);
                this.allCheck = !this.allCheck
            },
            showPopup: function () {
                if (this.orders[this.orderIdex].payed === false) {
                    this.show = true
                }
            },
            popupClose: function () {
                this.show = false
            },
            onChangeColl: function () {
                console.log(this.activeNames[0]);
                if (this.activeNames[0] === 'cardList') {
                    this.activeNames = ['0']
                } else {
                    this.activeNames = ['cardList']
                }
            },

            pay: function () {
                if (this.consignee && this.phone && this.city && this.address) {
                    this.orders[this.orderIdex].consignee = this.consignee;
                    this.orders[this.orderIdex].phone = this.phone;
                    this.orders[this.orderIdex].city = this.city;
                    this.orders[this.orderIdex].address = this.address;
                    this.orders[this.orderIdex].message = this.message;
                    //暂时将是否付款payed设置为当点击了付款按钮就为true
                    this.orders[this.orderIdex].payed = true;

                    console.log(this.orders);

                    this.$store.dispatch('modiAllOrder', this.orders);

                    Dialog.alert({
                        title: '功能演示',
                        message: '此功能仅作演示使用，当前已经支付完成！'
                    }).then(() => {
                        this.$router.push('/');
                    });

                } else {
                    Dialog.alert({
                        title: '信息未完善',
                        message: '提示：请将收货信息填写完整，再进行支付！'
                    }).then(() => {
                        // on close
                    });

                }

            },
            fieldChange: function (event, name) {
                console.log(event);
                switch (name) {
                    case 'consignee':
                        this.consignee = event;
                        console.log('进入userName修改');
                        break;
                    case 'phone':
                        this.phone = event;
                        console.log('进入userName修改');
                        break;
                    case 'message':
                        this.message = event;
                        console.log('进入userName修改');
                        break;
                    case 'address':
                        this.address = event;
                        console.log('进入userName修改');
                        break;
                    default:
                        break;
                }
            },
            areaConfirm: function (event) {
                console.log('点击了确认');
                console.log(event[0].name + ' ' + event[1].name + ' ' + event[2].name);
                this.city = event[0].name + ' ' + event[1].name + ' ' + event[2].name;
                this.popupClose();
            },
        },

    }
</script>

<style>
    .card {
        width: 95%;
        margin: 10px auto;
        border-radius: 5px;
        box-shadow: 3px 3px 10px #c7c6be;
        overflow: hidden;
        background-color: #fafafa;

    }

    .checkBox {
        width: 25px;
        background-color: #fafafa;
        float: left;
    }

    .checkBoxContent {
        width: 25px;
        height: 25px;
        display: block;
        position: relative;
        top: 30px;
        left: 5px;
    }

    .product {
        width: 100%;
        margin-top: 0;
        float: left
    }

    .number {
        float: right;
    }

    .allcheckBox {
        margin-left: 10px;
    }

    .footSpace {
        width: 100%;
        height: 50px;
        text-align: center;

    }
</style>
